<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="40%"
    :before-close="handleClose"
  >
    <div class="menu-dialog">
      <el-form
        inline
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
      >
        <div>
          <el-form-item label="类型" prop="menu_type">
            <el-radio-group @change="menuTypeFun" v-model="ruleForm.menu_type">
              <el-radio label="D">目录</el-radio>
              <el-radio label="M">菜单</el-radio>
              <el-radio label="B">按钮</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>

        <el-form-item
          :label="`${
            ruleForm.menu_type == 'D'
              ? '目录'
              : ruleForm.menu_type == 'M'
              ? '菜单'
              : '按钮'
          }名称`"
          prop="title"
          class="form-item-style"
        >
          <el-input
            placeholder="输入名称"
            style="width: 100%"
            v-model="ruleForm.title"
          />
        </el-form-item>
        <el-form-item label="上级菜单" class="form-item-style">
          <el-tree-select
            default-expand-all
            node-key="id"
            filterable
            v-model="ruleForm.pid"
            :data="menuList"
            check-strictly
            clearable
            :render-after-expand="false"
            :props="{
              label: 'title',
              children: 'sub',
            }"
            style="width: 100% !important"
            placeholder="选择上级菜单"
          >
          </el-tree-select>
        </el-form-item>
        <el-form-item
          label="路由地址"
          v-if="ruleForm.menu_type !== 'B'"
          prop="url"
          class="form-item-style"
        >
          <el-input
            placeholder="输入路由地址"
            style="width: 100%"
            v-model="ruleForm.url"
          />
        </el-form-item>
        <el-form-item
          label="路由参数"
          v-if="ruleForm.menu_type !== 'B'"
          class="form-item-style"
        >
          <el-input
            placeholder="输入路由参数"
            style="width: 100%"
            v-model="ruleForm.params"
          />
        </el-form-item>
        <el-form-item
          v-if="ruleForm.menu_type !== 'B' && ruleForm.menu_type !== 'M'"
          label="重定向"
          prop="redirect"
          class="form-item-style"
        >
          <el-input
            placeholder="输入重定向"
            style="width: 100%"
            v-model="ruleForm.redirect"
          />
        </el-form-item>
        <el-form-item label="排序" prop="sort" class="form-item-style">
          <el-input
            placeholder="排序"
            style="width: 100%"
            v-model="ruleForm.sort"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status" class="form-item-style">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="显示/隐藏" prop="is_hide" class="form-item-style">
          <el-radio-group v-model="ruleForm.is_hide">
            <el-radio :label="0">显示</el-radio>
            <el-radio :label="1">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="图标" class="form-item-style">
          <el-input
            placeholder="图标(图标参考element-plus图标)"
            style="width: 100%"
            v-model="ruleForm.icon"
          />
        </el-form-item>
        <el-form-item
          label="权限标识"
          class="form-item-style"
          v-if="ruleForm.menu_type == 'B'"
          prop="node"
        >
          <el-input
            placeholder="填写权限标识"
            style="width: 100%"
            v-model="ruleForm.node"
          />
        </el-form-item>

        <div v-if="ruleForm.menu_type !== 'B' && ruleForm.menu_type !== 'D'">
          <el-form-item label="组件路径" prop="component" style="width: 100%">
            <el-input
              placeholder="输入组件路径"
              style="width: 100%"
              v-model="ruleForm.component"
            />
          </el-form-item>
        </div>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="submit"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { addApi, saveApi } from "@/plugins/api/system/menu";
import { listApi } from "@/plugins/api/system/menu";

const props = defineProps({
  treeData: {
    type: Array,
    default: [],
  },
});
let ruleForm = ref({});
let rules = {
  menu_type: [
    {
      required: true,
      message: "请选择类型",
      trigger: "change",
    },
  ],
  title: [{ required: true, message: "请输入名称", trigger: "blur" }],
  url: [{ required: true, message: "请输入路由地址", trigger: "blur" }],
  component: [{ required: true, message: "请输入组件路径", trigger: "blur" }],
  redirect: [{ required: true, message: "请填写重定向路由", trigger: "blur" }],
  node: [{ required: true, message: "请填权限标识", trigger: "blur" }],
  status: [
    {
      required: true,
      message: "请选择状态",
      trigger: "change",
    },
  ],
  is_hide: [
    {
      required: true,
      message: "请选择状态",
      trigger: "change",
    },
  ],
};
let dialogVisible = ref(false);
function handleClose(done) {
  // dialogVisible.value = false;
  ElMessageBox.confirm("是否确定关闭此对话框?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
}
let title = ref("");
let ruleFormRef = ref(null);
function initFun(type, row) {
  getMenu();
  if (ruleFormRef.value) {
    ruleFormRef.value.resetFields();
  }

  if (type == "add") {
    title.value = "新增菜单";
    ruleForm.value = {};
    ruleForm.value.menu_type = "M";
    ruleForm.value.status = 1;
    ruleForm.value.is_hide = 0;
  } else {
    title.value = "编辑菜单";
    ruleForm.value = Object.assign({}, row);
  }

  dialogVisible.value = true;
}
const emit = defineEmits(["refreshList"]);
function submit() {
  if (!ruleFormRef.value) return;
  ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      let obj = Object.assign({}, ruleForm.value);

      if (obj.pid) {
        obj.pid = obj.pid;
      } else {
        obj.pid = 0;
      }

      if (!obj.id) {
        addApi(obj).then((data) => {
          ElMessage.success("新增成功！");
          dialogVisible.value = false;
          emit("refreshList");
        });
      } else {
        saveApi(obj).then((data) => {
          ElMessage.success("修改成功！");
          dialogVisible.value = false;
          emit("refreshList");
        });
      }
    }
  });
}
let menuList = ref([]);
function getMenu() {
  listApi().then((data) => {
    menuList.value = data;
  });
}
function menuTypeFun() {
  ruleForm.value.url = "";
  ruleForm.value.params = "";
  ruleForm.value.redirect = "";
  ruleForm.value.component = "";
  ruleForm.value.node = "";
}
onMounted(() => {});
defineExpose({
  initFun,
});
</script>
<style scoped lang="scss">
.menu-dialog {
  .form-item-style {
    width: 50%;
    margin-right: 0;

    :deep(.el-input) {
      width: 100%;
    }
  }
}
</style>
